<template>
  <view class="container">
    <view class="category-page">
      <!-- 搜索框 -->
      <view class="index-search-box">
        <u-search :show-action="true" :show-icon="true" :placeholder="searchName" :shape="'square'" v-model="keyword"
                  @search="search"
                  @custom="search"></u-search>
      </view>

      <!-- 分类样式：一级分类(大图) 10 -->
      <view class="cate-content10" v-if="config.category_style === 10 && list.length > 0">
        <view class="cate-wrapper cate_style__10">
          <scroll-view :scroll-y="true" :style="'height: ' + (scrollHeight - 10) + 'px; '">
            <view class="cate-item" v-for="(item, index) in list" :key="index">
              <navigator hover-class="none" :url="'/pages/goods/index?id=' + item.id">
                <image mode="widthFix" :src="item.image"></image>
              </navigator>
            </view>
          </scroll-view>
        </view>
      </view>

      <!-- 分类样式：一级分类(小图) 11 -->
      <view class="cate-content11" v-else-if="config.category_style === 11 && list.length > 0">
        <view class="cate-wrapper cate_style__11">
          <scroll-view class="clear" :scroll-y="true" :style="'height: ' + (scrollHeight - 10) + 'px; '">
            <view class="cate-item" v-for="(item, index) in list" :key="index">
              <navigator hover-class="none" :url="'/pages/goods/index?id=' + item.id">
                <image mode="widthFix" :src="item.image"></image>
                <text class="f-26">{{ item.name }}</text>
              </navigator>
            </view>
          </scroll-view>
        </view>
      </view>

      <!-- 分类样式：二级分类 20 -->
      <view class="cate-content20 dis-flex" v-else-if="config.category_style === 20 && list.length > 0">
        <!-- 左侧 一级分类 -->
        <scroll-view class="cate-left f-28" :scroll-y="true" :style="'height: ' + scrollHeight + 'px; '">
          <text
              @tap="selectNav"
              :class="'type-nav ' + (curNav == item.id ? 'selected' : '')"
              :data-id="item.id"
              :data-index="index"
              v-if="item.pid == 0"
              v-for="(item, index) in list"
              :key="index"
          >
            {{ item.name }}
          </text>
        </scroll-view>

        <!-- 右侧 二级分类 -->
        <scroll-view class="cate-right b-f" :scroll-top="scrollTop" :scroll-y="true"
                     :style="'height: ' + scrollHeight + 'px; '">
          <view v-if="list[curIndex]">
            <view class="cate-right-cont">
              <view class="cate-two-box">
                <view class="cate-cont-box">
                  <view class="flex-two" v-if="twoitem.pid == curNav" v-for="(twoitem, index) in list" :key="index">
                    <navigator hover-class="none" :url="'/pages/goods/index?category_id=' + twoitem.id">
                      <view class="cate-img" >
                        <image :src="twoitem.image"></image>
                      </view>
                      <text>{{ twoitem.name }}</text>
                    </navigator>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 分类样式：三级分类 30 -->
      <view class="cate-content30 dis-flex" v-else-if="config.category_style == 30 && list.length > 0">
        <!-- 左侧 一级分类 -->
        <scroll-view class="cate-left f-28" :scroll-y="true" :style="'height: ' + scrollHeight + 'px; '">
          <text
              @tap="selectNav"
              :class="'type-nav ' + (curNav == item.id ? 'selected' : '')"
              :data-id="item.id"
              :data-index="item.pid"
              v-if="item.pid == 0"
              v-for="(item, index) in list"
              :key="index"
          >
            {{ item.name }}
          </text>
        </scroll-view>

        <!-- 右侧 二级分类 -->
        <scroll-view class="cate-right b-f" :scroll-top="scrollTop" :scroll-y="true"
                     :style="'height: ' + scrollHeight + 'px; '">
          <view v-if="list[curIndex]">
            <view class="cate-right-cont">
              <view class="cate-two-box">
                <view class="cate-cont-box">
                  <view class="flex-two" v-if="twoitem.pid == curNav" v-for="(twoitem, index) in list" :key="index">
                    <navigator class="cate-nav" hover-class="none" :url="'/pages/goods/index?category_id=' + twoitem.id">
                      <text style="font-size: 16px">{{ twoitem.name }}</text>
                    </navigator>
                    <u-gap height="1" bg-color="rgb(187 187 187 / 21%)"></u-gap>

                    <view class="flex-three" v-if="items.pid == twoitem.id" v-for="(items, index1) in list"
                          :key="index1">
                      <navigator hover-class="none" :url="'/pages/goods/index?category_id=' + items.id">
                        <view class="cate-img" >
                          <image :src="items.image"></image>
                        </view>
                        <text>{{ items.name }}</text>
                      </navigator>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <view v-if="!list.length && notcont">
        <u-empty text="亲，暂无商品分类哦" mode="list"></u-empty>
      </view>
    </view>
  </view>
</template>

<script>
import goods_api from "@/common/goods_api";

export default {
  data() {
    return {
      // 搜索框样式
      searchColor: 'rgba(0,0,0,0.4)',

      searchSize: '15',
      searchName: '搜索商品',
      keyword: '',

      // 列表高度
      scrollHeight: 0,

      // 一级分类：指针
      curNav: 0,

      curIndex: 0,

      // 分类列表
      list: [],

      // show
      notcont: false,

      config: {
        category_style: 0
      },

      scrollTop: 0,

      twoitem: {
        pid: '',
        id: '',
        images: '',
        name: ''
      }
    };
  },
  onLoad: function () {
    let that = this;
    // 设置分类列表高度
    that.setListHeight();
    // 获取分类列表
    this.getCategoryList();
  },
  onShow: function () {
    let that = this;
    // 设置分类列表高度
    that.setListHeight();
    // 获取分类列表
    this.getCategoryList();
  },
  /**
   * 设置分享内容
   */
  onShareAppMessage: function () {
    let config = this.config;
    return {
      title: config.share_title,
      path: '/pages/category/index?referee_id=' + app.globalData.getUserId()
    };
  },
  methods: {
    search(e) {
      console.log(e)
      this.keyword = e || ''
      if (e){
        uni.navigateTo({
          url: '/pages/goods/index?keywords=' + e
        })
      }
    },
    /**
     * 设置分类列表高度
     */
    setListHeight: function () {
      let that = this;
      uni.getSystemInfo({
        success: function (res) {
          that.setData({
            scrollHeight: res.windowHeight - 47
          });
        }
      });
    },

    /**
     * 获取分类列表
     */
    getCategoryList: function () {
      let that = this;
      goods_api.category({from: 'category'}).then((res) => {
        if (res.code === 0) {
          let data = res.data;

          that.setData({
            list: data.category,
            config: data.config,
            curNav: data.category.length > 0 ? data.category[0].id : 0,
            notcont: !data.category.length
          });
        }

      });
    },

    /**
     * 一级分类：选中分类
     */
    selectNav: function (t) {
      let curNav = t.target.dataset.id;
      let curIndex = parseInt(t.target.dataset.index);
      this.setData({
        curNav,
        curIndex,
        scrollTop: 0
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
